<template>
	<view class="content" v-show="!hidePage">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">
				您好 - {{ vuex_user.nickName }}
			</text>
		</view>
		<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">

			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" :label-position="labelPosition"
			 label="用户名" prop="username" label-width="150">
				<u-input :border="border" placeholder="请输入用户名" v-model="form.username" type="text" :clearable="false"></u-input>
			</u-form-item>

			<u-form-item :label-position="labelPosition" label="密码" prop="password" label-width="150">
				<u-input :border="border" placeholder="请输入密码" v-model="form.password" type="password" :clearable="false"></u-input>
			</u-form-item>

		</u-form>
		<view>
			<u-button :custom-style="formReady ? activeStyle : inactiveStyle" :disabled="!formReady" @click="login">提交</u-button>
		</view>
		<view class="agreement-text">
			登录即代表同意uView的版权协议
		</view>
	</view>
</template>

<script>
	import setToken from '@/api/token.js'
	export default {
		data() {
			return {
				title: 'Hello',
				hidePage: false,
				form: {
					username: '',
					password: '',
				},
				formReady: true,
				activeStyle: {
					color: '#f3f4f6',
					marginTop: '20rpx',
					backgroundColor: '#E4352B'
				},
				inactiveStyle: {
					color: '#f3f4f6',
					marginTop: '20rpx',
					backgroundColor: '#FFA9A4'
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur'],
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change'],
						},
						{
							type: 'number',
							message: '密码只能为数字',
							trigger: ['change'],
						}
					]
				},
				codeTips: '',
				errorType: ['message'],
				labelPosition: 'left',
				border: false,
				check: true,
			}
		},
		onLoad(option) {
			this.$u.api.fedLogOut() // 凡跳转登录页清空token，401跳转该页

			this.wxAutoLogin(option)
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {
			model: {
				handler: function(val, oldval) {
					let _this = this
					// 凡有一个未填写不验证，不通过
					if (val.phone == "" || val.code == "") {
						_this.formReady = false
						return
					}
					this.$refs.uForm.validate(valid => {
						if (valid) {
							_this.formReady = true
						} else {
							_this.formReady = false
						}
					})
				},
				deep: true
			}
		},
		methods: {
			wxAutoLogin(option) {
				// #ifdef H5
				const appid = this.$dy_config.wxH5AppId
				const scope = this.$dy_config.wxH5scope
				let isWxBrowser = this.$jwx.isWxBrowser() // 微信公众号登录
				if (appid != '' && isWxBrowser) {
					this.hidePage = true
					uni.showLoading({
						title: '自动登录中...',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
					}, 800);

					if (option.code != null) {
						this.$u.vuex('vuex_token', "123456")
						this.$u.vuex('vuex_user', {
							nickName: "uView用户"
						})
						this.$jwx.fuckWx(true, 1) // 这里的1指的是从登录页返回上一页。如果是当前页面的调用不需要额外返回一层
					} else {
						// snsapi_base现象为刚看到登录页面就跳转返回了。所以采用这种方法的，适合放在公众号入口，用户无感知。
						// snsapi_userinfo现象为看到登录页就需要授权登录。
						this.$jwx.goWxOauthUrl(appid, scope)
					}
				}
				// #endif
			},
			login() {
				console.info("提交的登录信息", this.form)
				this.$u.post('/login', this.form).then(res => {
					this.$u.vuex('vuex_token', res.data.token)
					this.$u.vuex('vuex_user', {
						nickName: res.data.username
					})
				})
				// 返回上一页
				// #ifdef H5
				history.back()
				return
				// #endif
				console.info("返回上一级")
				uni.navigateBack()
			},
			codeChange(text) {
				this.codeTips = text;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}

	.agreement-text {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
		color: $u-tips-color;
	}
</style>
